<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>购物系统-注册页面</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">
    <style>
        /* 搜索栏 */
        .ms-nav-search{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        /* 搜索栏输入框 */
        .ms-nav-search input{
            width: 500px;
            height: 40px;
            font-size: 20px;
            border: black solid 1px;

            transition-duration: 0.5s;
        }
        .ms-nav-search input:focus{
            border-color: #c7e4c7;
        }
        /* 搜索栏按钮 */
        .ms-nav-search button{
            padding: 8px;
            border-radius: 5%;
            width: 100px;
            transition-duration: 0.5s;
        }
        .ms-nav-search button:hover{
            background: rgba(201, 220, 216, 1);
            transform: scale(1.1);
        }

        /* 固定图片的长和宽 */
        .carousel-item img{
            width: 400px;
            height: 500px;
            border-radius: 10px;
        }

        /* 无序列表适当间距 */
        .ms-ul li{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <nav th:replace="common/topbar.html"></nav>
    <div th:replace="common/ms-toast.html"></div>

    <div class="container">
        <div class="col-md-3"></div>
        <div class="col-md-6 mx-auto shadow p-5 ">
            <h1 class="text-center placeholder">注册页面</h1>
            <form id="ms-form-register">
            <ul class="ms-ul list-unstyled">
                <!-- 1 用户账号 -->
                <li>
                    <div class="form-floating">
                        <input name="usercode" type="text" class="form-control placeholder" id="ms-form-reg-code" placeholder="账号">
                        <label for="ms-form-reg-code">账号</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-reg-check-code-fail" class="invalid-feedback">
                            提示: 账号要求长度在5~10之间，且只能包含数字、字母和下划线
                        </div>
                    </div>
                </li>
                <!-- 2 用户密码 -->
                <li>
                    <div class="form-floating">
                        <input name="password" type="password" class="form-control placeholder" id="ms-form-reg-password" placeholder="密码">
                        <label for="ms-form-reg-password">密码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-reg-check-password-fail" class="invalid-feedback">
                            提示: 密码格式要求
                        </div>
                    </div>
                </li>
                <!-- 3 用户确认密码 -->
                <li>
                    <div class="form-floating">
                        <input type="password" class="form-control placeholder" id="ms-form-reg-password-second" placeholder="确认密码">
                        <label for="ms-form-reg-password-second">确认密码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-reg-check-password-second-fail" class="invalid-feedback">
                            提示: 两次输入的密码不一致
                        </div>
                    </div>
                </li>
                <!-- 4 用户联系电话 -->
                <li>
                    <div class="form-floating">
                        <input name="tel" type="text" class="form-control placeholder" id="ms-form-reg-tel" placeholder="联系电话">
                        <label for="ms-form-reg-tel">联系电话</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-reg-check-tel-fail" class="invalid-feedback">
                            提示: 联系方式必须为11位电话号码
                        </div>
                    </div>
                </li>
                <!-- 5 用户邮箱 -->
                <li>
                    <div class="form-floating">
                        <input name="email" type="text" class="form-control placeholder" id="ms-form-reg-email" placeholder="邮箱">
                        <label for="ms-form-reg-email">邮箱</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-reg-check-email-fail" class="invalid-feedback">
                            提示: 联系方式必须为11位电话号码
                        </div>
                    </div>
                </li>
                <!-- 6 用户验证码 -->
                <li class="row">
                    <div class="col-md-4 text-end">
                        <button id="ms-btn-send-code" type="button" class="btn btn-info mt-2 placeholder" onclick="send_email_code('ms-btn-send-code')">发送验证码</button>
                    </div>
                    <div class="form-floating col-md-8">
                        <input name="emailCode" type="text" class="form-control w-50 placeholder" id="ms-form-reg-email-check" placeholder="Password">
                        <label for="ms-form-reg-email-check">验证码</label>
                    </div>
                </li>
                <!-- 注册按钮 -->
                <li class="text-center">
                    <button id="ms-btn-reg-random" class="btn btn-danger w-25 placeholder" type="button" onclick="ms_register_random()">随机生成(测试)</button>
                    <button id="ms-btn-reg" class="btn btn-primary w-50 placeholder" type="button" onclick="ms_register('ms-btn-reg')">
                        注册
                    </button>
                </li>
            </ul>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
    <!-- 引入第三方 JS 脚本文件 -->
    <script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
    <script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}" type="text/javascript"></script>
    <!-- 引入自定义的 JS 脚本文件 -->
    <script src="/js/common/ms-config.js" th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
    <script src="/js/common/ms-toast.js" th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
    <script src="/js/common/ms-random.js" th:src="@{/js/common/ms-random.js}" type="text/javascript"></script>
    <script src="/js/common/ms-btn.js" th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
    <script src="/js/user/ms-register.js" th:src="@{/js/user/ms-register.js}" type="text/javascript"></script>

</body>
</html>